<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 导入semantic的样式 -->
<jsp:include page="../header.jsp">
<jsp:param value="面试记录" name="title" />
</jsp:include>
<script type="text/javascript" src="uploader/jquery.ui.widget.js"></script>
<script type="text/javascript" src="uploader/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="uploader/jquery.fileupload.js"></script>
<script type="text/javascript" src="WEB-INF/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
function ajax(params) {

	var xmlhttp;
	// 判断XMLHttpRequest是否存在
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	} else {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}

	// readystate监听事件
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4) {
			// 输出响应的结果
			if (params.callback) {
				params.callback(xmlhttp);
			}
		}
	};

	// 取出method参数
	var method = params.method ? params.method : "GET";
	var asynch = params.asynch ? true : params.asynch;

	// 打开一个连接
	xmlhttp.open(method, params.url, params.asynch);
	// 判断是否POST请求
	if (method.toLowerCase() == 'post') {
		// post请求一定要设置这句话
		xmlhttp.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
	}

	// 判断请求是否有参数
	if (params.params) {
		// params.params = {"userName":"张三"，"gender":"男"};
		// 转换成userName=张三&gengder=男
		var p = [];
		for (key in params.params) {
			p.push(key + "=" + params.params[key]);
		}
		xmlhttp.send(p.join("&"));
	} else {
		xmlhttp.send(null);
	}
}

/**
 * 省份改变JS
 */
function changProvince(tag){
	var city = document.getElementById("city");
	var area = document.getElementById("area");
	city.innerHTML = "";
	area.innerHTML = "";
	ajax({
		url:"interview/manager?type=city&province=" + tag.value,
		callback:function(data){
			var datas;
			if(window.JSON){
				datas = JSON.parse(data.response);
			}else{
				datas = eval("(" + data.response + ")");
			}
			if(datas){
				for (var int = 0; int < datas.length; int++) {
					var item = datas[int];
					var div = document.createElement("option");
					div.value = item.id;
					div.innerText = item.city;
					city.appendChild(div);
				}
				$("#provinces").val($("#province option:selected").text()).val();
				$("#citys").val($("#city option:selected").text()).val();
				changCity(city);
			}
		}
	});
}

/**
 * 城市改变JS
 */
function changCity(tag){
	var area = document.getElementById("area");
	area.innerHTML = "";
	
	ajax({
		url:"interview/manager?type=area&city=" + tag.value,
		callback:function(data){
			var datas;
			if(window.JSON){
				datas = JSON.parse(data.response);
			}else{
				datas = eval("(" + data.response + ")");
			}
			if(datas){
				for (var int = 0; int < datas.length; int++) {
					var item = datas[int];
					var div = document.createElement("option");
					div.value = item.id;
					div.innerText = item.area;
					area.appendChild(div);
				}
				$("#areas").val($("#area option:selected").text()).val();
			}
		}
	});
}


function initProvince(){
	changProvince(document.getElementById("province")); 
}


$(function() {
	//$('#fileupload')匹配的元素必须是file选择框
	$('#fileupload').fileupload({
		url : "upload",
		dataType : 'json',
		formData:[{
			name:"model",
			value:"interview"
		}],
		done : function(e, data) {
			//上传结果返回后，判断是否成功
			if(data.result.message){
				alert(data.result.message);
			}else{
				var p = $('<p/>');
				p.append("<input type='hidden' name='attachs' value='"+data.result.id+"'>");
				p.append("<span>"+data.result.fileName+"</span>");
				p.append('<img src="' + data.result.fileName + '" ' + " />');
				p.append("<i class='remove icon'></i>");
				p.appendTo('.files');
			}
		//	$(".fileinput-text").text("选择文件");
		},
		progressall : function(e, data) {
			var progress = parseInt(data.loaded / data.total * 100, 10);
			$(".fileinput-text").text("上传中..."+progress + '%');
		},
		start:function(){
			$(".fileinput-text").text("上传中...");
		}
	});
	
	/**
	 * 删除附件操作
	 */
	$(".files").on("click",".xx",function(){
		var id = $(this).prev().prev().val();
		var that = this;
		ajax({
			url:"delete/accessory?id=" + id,
			callback:function(data){
				var datas;
				if(window.JSON){
					datas = JSON.parse(data.response);
				}else{
					datas = eval("(" + data.response + ")");
				}
				if(datas){
					$(that).parent().remove();
				}
			}
		});
	});
});


</script>
<style type="text/css">
.btn {
	height:41px;
	width:80px;
	padding: 10px 5px;
	border-radius:3px;
	display: inline-block;
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	margin-bottom:2px;
	font:bold 16px "宋体";
}

.btn-success:hover, .btn-success:focus, .btn-success:active,
	.btn-success.active, .open>.dropdown-toggle.btn-success {
	color: #fff;
	background-color: #449d44;
	border-color: #398439;
}

.btn-success {
	color: #fff;
	background-color: #5cb85c;
	border-color: #4cae4c;
}

.fileinput-button input {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	opacity: 0;
	-ms-filter: 'alpha(opacity=0)';
	font-size: 200px !important;
	direction: ltr;
	cursor: pointer;
	display: block;
}

.files .xx{
	margin-left: 20px;
    font-size: 20px;
    color: blue;
    cursor: pointer;
}
.files .xx:HOVER{
    color: #f60;
}
</style>
</head>
<body onload="initProvince()">
	<!-- class="teacher-content" -->
	<jsp:include page="../main.jsp"></jsp:include>
	<div class="teacher-content" style="margin-right: 50px">
		<form class="ui form segment" method="post">
			<div class="field">
				<label>公司名称</label> 
				<input name="companyName" type="text" value="${param.companyName }">
			</div>
			<div class="three fields">
				<div class="field">
					<label>省份</label>      
					<input name="province" type="hidden" id="provinces" />
					<select class="ui dropdown" onchange="changProvince(this)" id="province">
						<c:forEach items="${ provinceList }" var="province">
							<option value="${ province.id }">${ province.province }</option>
						</c:forEach>
					</select>
				</div>
				<div class="field">
					<label>城市</label>
					<input name="city" type="hidden" id="citys" />
					<select class="ui dropdown" onchange="changCity(this)" id="city">
					</select>
				</div>
				<div class="field">
					<label>地区</label>
					<input name="area" type="hidden" id="areas" />
					<select class="ui dropdown" id="area">
					</select>
				</div>
			</div>
			<div class="field">
				<label>详细地址</label> 
				<input name="detailAddress" type="text" value="${param.detailAddress }">
			</div>
			<div class="field">
				<label>面试时间</label> 
				<input name="time" value="${param.time }" TYPE="date"/>
				<!-- <input name="time" id="d421" class="Wdate" type="text" onClick="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/> -->
			</div>
			<div class="field">
				<label>面试总结</label> 
				<textarea rows="" cols="" name="summary" value="${param.summary }"></textarea>
			</div>
			<span class="btn btn-success fileinput-button"> 
				<span class="fileinput-text">选择文件</span> 
				<input id="fileupload" type="file" name="files[]" multiple>
			</span>
			<button class="ui blue  button">提交</button>
			<div class="files"></div>
		</form>
	</div>
</body>
</html>